<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('拜访日志列表')"/>
</head>
<body class="gray-bg">
<div class="container-div" id="visit_id">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li hidden id="typeId">
                            <label for="type">条线选择：</label>
                            <select id="type" name="types" onchange="loadSelect(this.value)">
                                <option value="1,2,3">所有</option>
                                <option value="1,2">城市</option>
                                <option value="1,3">农村</option>
                            </select>
                        </li>
                        <li id="unit3Li" style="display: none">
                            <label for="unit3Select">三级单元：</label>
                            <select id="unit3Select" name="unit3Id" onchange="setNextUnitSelect(this.value,3)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li id="unit4Li" style="display: none">
                            <label for="unit4Select">四级单元：</label>
                            <select id="unit4Select" name="unit4Id" onchange="setNextUnitSelect(this.value,4)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li id="unit5Li">
                            <label for="unit5Select">包区名称：</label>
                            <select id="unit5Select" name="unit5Id" onchange="setSubordinateSelect(this.value,5)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li>
                            <label for="unit6Select">六级单元：</label>
                            <select id="unit6Select" name="unit6Id" onchange="setSubordinateSelect(this.value,6)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li>
                            <label for="unit7Select">七级单元：</label>
                            <select id="unit7Select" name="unit7Id"
                                    onchange="setSubordinateSelect(this.value,7,this)">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li hidden id="unit8Li">
                            <label for="unit8Select">所属楼栋：</label>
                            <select id="unit8Select" name="unit8Id"
                                    onchange="setSubordinateSelect(this.value,8,'#unit7Select')">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li hidden id="unit9Li">
                            <label for="unit9Select">所属单元：</label>
                            <select id="unit9Select" name="unit9Id">
                                <option value="">所有</option>
                            </select>
                        </li>
                        <li>
                            <label>用户类型：</label>
                            <select name="communicationOperator"
                                    th:with="type=${@dict.getType('communication_operators')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li>
                            <label for="userName">用户姓名：</label>
                            <input id="userName" name="userName" type="text"/>
                        </li>
                        <li>
                            <label for="currentPhoneNumber">当前号码：</label>
                            <input id="currentPhoneNumber" name="currentPhoneNumber" type="text"/>
                        </li>
                        <li>
                            <label for="mealValue">套餐价值：</label>
                            <input id="mealValue" name="mealValue" type="text"/>
                        </li>
                        <li>
                            <label>时间选择：</label>
                            <select id="periodSelect" name="period" onchange="checkTimeLi(this.value)">
                                <option value="0">今日新增</option>
                                <option value="1">昨日新增</option>
                                <option value="6">本周新增</option>
                                <option value="29">本月新增</option>
                                <option value="89">季度新增</option>
                                <option value="-1">自定义</option>
                            </select>
                        </li>
                        <li id="startTimeLi" style="display: none">
                            <label for="startTimeInput">
                                开始时间：
                            </label>
                            <input class="time-input" id="startTimeInput" name="startTime" placeholder="yyyy-MM-dd"
                                   type="text">
                        </li>
                        <li id="endTimeLi" style="display: none">
                            <label for="endTimeInput">
                                结束时间：
                            </label>
                            <input class="time-input" id="endTimeInput" name="endTime" placeholder="yyyy-MM-dd"
                                   type="text">
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.addFull()" shiro:hasPermission="workbench:visit_log:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.editFull()"
               shiro:hasPermission="workbench:visit_log:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="workbench:visit_log:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="workbench:visit_log:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    let editFlag = [[${@permission.hasPermi('workbench:visit_log:edit')}]];
    let removeFlag = [[${@permission.hasPermi('workbench:visit_log:remove')}]];
    let communicationOperatorDatas = [[${@dict.getType('communication_operators')}]];
    let prefix = ctx + "workbench/visit_log";

    $(loadSelect('1,2,3'))

    /**
     * 加载选择器
     */
    function loadSelect(types) {
        $.ajax({
            url: '/workbench/leaf_unit_city/getMyDept',
            method: 'post',
            success: function (dept) {
                let level = dept.level;
                if (level !== 2) {
                    setPreviousUnitSelect(dept.parentId, level);
                }
                if (level <= 3) {
                    $("#typeId").show();
                }
                setCurrentSelect(dept, level);
                if (level <= 4) {
                    setNextUnitSelect(dept.deptId, level, types);
                } else {
                    setSubordinateSelect(dept.deptId, level)
                }
                //延时加载表格
                setTimeout(loadTable, 200);
            }
        })
    }

    let imgIndex = 0;

    /**
     * 加载表格
     */
    function loadTable() {
        let options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "信息上报",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'wbWholeUnitNew.unit3.deptName',
                    title: '三级单元',
                    visible: false
                },
                {
                    field: 'wbWholeUnitNew.unit4.deptName',
                    title: '四级单元',
                    visible: false
                },
                {
                    field: 'wbWholeUnitNew.unit5.deptName',
                    title: '包区名称',
                    visible: false
                },
                {
                    field: 'wbWholeUnitNew.unit6.name',
                    title: '社区/行政村'
                },
                {
                    field: 'wbWholeUnitNew.unit7.name',
                    title: '小区/街道/自然庄'
                },
                {
                    field: 'wbWholeUnitNew.unit8.name',
                    title: '楼栋名称',
                    visible: false
                },
                {
                    field: 'wbWholeUnitNew.unit9.name',
                    title: '单元名称',
                    visible: false
                },
                {
                    field: 'userName',
                    title: '用户姓名'
                },
                {
                    field: 'currentPhoneNumber',
                    title: '当前号码'
                },
                {
                    field: 'communicationOperator',
                    title: '用户类型',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(communicationOperatorDatas, value);
                    }

                },
                {
                    field: 'mealValue',
                    title: '套餐价值'
                },
                {
                    field: 'expiredTime',
                    title: '到期时间'
                },
                {
                    field: 'translatedPhoneNumber',
                    title: '转化号码',
                    formatter: function (value, row, index) {
                        if (value === null || value === '') {
                            return '未转化'
                        }
                        return value
                    }
                },
                {
                    field: 'scenePhoto',
                    title: '现场照片',
                    formatter: function (value) {
                        let clientHeight = document.getElementById("visit_id").clientHeight
                        let clientWidth = document.getElementById("visit_id").clientWidth
                        return $.table.imageView(value, clientHeight, clientWidth, '', imgIndex++);
                    }
                },
                {
                    field: 'remake',
                    title: '备注',
                    formatter: function (value, row, index) {
                        if (value === null || value === '') {
                            return '无'
                        }
                        return value
                    }
                },
                {
                    field: 'createTime',
                    title: '上传日期'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        let actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editFull(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    /**
     * 设置上级单元选择器
     * @param parentId 当前选择的项
     * @param currentLevel 单元等级
     */
    function setPreviousUnitSelect(parentId, currentLevel) {
        $.ajax({
            method: 'post',
            url: '/system/dept/selectByDeptId',
            data: {
                deptId: parentId
            },
            success: function (previousUnit) {
                let selectId
                let parentLevel = currentLevel - 1
                switch (parentLevel) {
                    case 5:
                        selectId = "#unit5Select"
                        setPreviousUnitSelect(previousUnit.parentId, parentLevel)
                        break
                    case 4:
                        selectId = "#unit4Select"
                        setPreviousUnitSelect(previousUnit.parentId, parentLevel)
                        break
                    case 3:
                        selectId = "#unit3Select"
                        break
                    case 2:
                        break
                    default:
                        alert("单元等级错误p：" + parentLevel)
                }
                let option = "<option value='" + previousUnit.deptId + "'>" + previousUnit.deptName + "</option>"
                $(selectId).html(option).selectpicker('refresh');
            }
        })
    }

    /**
     * 设置当前选择器的值
     */
    function setCurrentSelect(dept, level) {
        let selectId
        switch (level) {
            case 9:
                selectId = "#unit9Select"
                break
            case 8:
                selectId = "#unit8Select"
                break
            case 7:
                selectId = "#unit7Select"
                break
            case 6:
                selectId = "#unit6Select"
                break
            case 5:
                selectId = "#unit5Select"
                break
            case 4:
                selectId = "#unit4Select"
                break
            case 3:
                selectId = "#unit3Select"
                break
            case 2:
                break
            default:
                alert("单元等级错误c：" + level)
        }
        let options = "<option value='" + dept.deptId + "'>" + dept.deptName + "</option>";
        $(selectId).html(options).selectpicker('refresh');
    }

    /**
     * 设置下级单元选择器
     * @param deptId 本单元id
     * @param parentLevel 本单元等级
     * @param types types
     */
    function setNextUnitSelect(deptId, parentLevel, types) {
        let currentLevel = parentLevel + 1
        resetCurrentSelectOptions(currentLevel)
        $.ajax({
            method: 'post',
            url: '/system/dept/getChildrenDeptFilterByTypes',
            data: {
                deptId: deptId,
                types: types,
            },
            success: function (list) {
                let options = "<option value=\"\">所有</option>";
                for (let i = 0; i < list.length; i++) {
                    let option = list[i];
                    options += "<option value='" + option.deptId + "'>" + option.deptName + "</option>";
                }
                let selectId
                let liId
                let firstUnit = list[0]
                switch (currentLevel) {
                    case 5:
                        selectId = "#unit5Select"
                        // liId = "#unit5Li"
                        if (firstUnit !== undefined) {
                            setSubordinateSelect(list[0].deptId, currentLevel)
                        }
                        break
                    case 4:
                        selectId = "#unit4Select"
                        liId = "#unit4Li"
                        if (firstUnit !== undefined) {
                            setNextUnitSelect(list[0].deptId, currentLevel, types)
                        }
                        break
                    case 3:
                        selectId = "#unit3Select"
                        liId = "#unit3Li"
                        if (firstUnit !== undefined) {
                            setNextUnitSelect(list[0].deptId, currentLevel, types)
                        }
                        break
                    default:
                        alert("单元等级错误n：" + currentLevel)
                }
                $(selectId).html(options).selectpicker('refresh');
                if (liId !== '') {
                    $(liId).show();
                }
            }
        })
    }

    /**
     * 设置下属选择器
     * @param parentId parentId
     * @param parentLevel parentLevel
     * @param unit7Select unit7Select
     */
    function setSubordinateSelect(parentId, parentLevel, unit7Select) {
        let currentLevel = parentLevel + 1
        resetCurrentSelectOptions(currentLevel)
        $.ajax({
            method: 'post',
            url: '/workbench/leaf_unit_city/selectChildrenUnitByParentId',
            data: {
                parentId: parentId,
                currentLevel: currentLevel
            },
            success: function (list) {
                let options = "<option value=\"\">所有</option>"
                for (let i = 0; i < list.length; i++) {
                    let option = list[i];
                    options += "<option unit7Type=" + option.unit7Type + " value='" + option.id + "'>" + option.name + "</option>";
                }
                let unitSelect
                let firstItem = list[0]
                switch (currentLevel) {
                    case 6:
                        unitSelect = '#unit6Select'
                        if (firstItem !== undefined) {
                            setSubordinateSelect(firstItem.id, currentLevel);
                        } else {
                            $('#unit7Select').html(options).selectpicker('refresh');
                        }
                        break
                    case 7:
                        unitSelect = '#unit7Select';
                        if (firstItem !== undefined) {
                            setSubordinateSelect(firstItem.id, currentLevel, unitSelect)
                        } else {
                            $('#unit8Select').html(options).selectpicker('refresh');
                        }
                        break
                    case 8:
                        if (firstItem !== undefined) {
                            setSubordinateSelect(firstItem.id, currentLevel)
                        } else {
                            $('#unit9Select').html(options).selectpicker('refresh');
                        }
                        let unit7Type = $(unit7Select).find("option:selected").attr("unit7Type");
                        if (unit7Type === '0') {
                            $('#unit8Li').show()
                            $('#unit9Li').show()
                        } else {
                            $('#unit8Li').hide()
                            $('#unit9Li').hide()
                        }
                        unitSelect = '#unit8Select';
                        break
                    case 9:
                        unitSelect = '#unit9Select'
                        break
                    default:
                        console.log('ss' + currentLevel)
                        return
                }
                $(unitSelect).html(options).selectpicker('refresh');
            }
        })
    }

    /**
     * 设置选择器所有后，重置后续所有选择器未所有
     * @param level 单元等级
     */
    function resetCurrentSelectOptions(level) {
        let options = "<option value=\"\">所有</option>"
        switch (level) {
            case 3:
                $("#unit4Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(4)
                break
            case 4:
                $("#unit5Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(5)
                break
            case 5:
                $("#unit6Select").html(options).selectpicker('refresh')
                resetCurrentSelectOptions(6)
                break
        }
    }

    /**
     * 如果选择自定义,显示日期选择框,否则隐藏
     * @param value value
     */
    function checkTimeLi(value) {
        if (value === '-1') {
            $("#startTimeLi").show()
            $("#endTimeLi").show()
        } else {
            $("#startTimeLi").hide()
            $("#endTimeLi").hide()
        }
    }
</script>
</body>
</html>
